<template>
    <div style="margin-bottom:56px">
        <v-toolbar dark color="primary" style="box-shadow:none">
            <v-icon @click="$router.back(-1)">keyboard_arrow_left</v-icon>
            <v-toolbar-title style="margin:0">小区团购</v-toolbar-title>
        </v-toolbar>

        <v-layout row wrap style="background:#4caf50">
            <v-flex xs12>
                <v-layout class="search" justify-center align-center>
                    <v-flex xs1><v-icon>search</v-icon></v-flex>
                    <v-flex xs10>
                        <input style="heigh:25px;font-size:18px" placeholder="搜索团购" single-line outline>
                    </v-flex>
                </v-layout>
            </v-flex>
        </v-layout>

        <v-layout row>
            <v-flex xs12 sm6 offset-sm3>
            <v-card>
                <v-list two-line>
                <div v-for="(item, index) in items" @click="goDetail(item.purchaseId)" :key="index">
                    <v-list-tile avatar ripple>
                        <v-list-tile-avatar>
                        <img src="http://ppt.downhot.com/d/file/p/2014/08/05/cb5322240543dabe9401fd166a1a6cfc.png" :key="index"
                        style="height: 50px;width:60px;border-radius:0">
                        </v-list-tile-avatar>
                    <v-list-tile-content>
                        <v-list-tile-sub-title class="text--primary">{{ item.purchaseName }}</v-list-tile-sub-title>
                        <v-list-tile-sub-title>{{ item.purchaseDetail }}</v-list-tile-sub-title>
                        <v-list-tile-sub-title>
                            <v-icon small light>person</v-icon><span style="font-size:10px">{{item.people}}人</span>
                            <v-icon small light style="margin-left:20px">place</v-icon><span style="font-size:10px">{{item.communityName}}</span>
                        </v-list-tile-sub-title>
                    </v-list-tile-content>
                    <v-list-tile-action>
                        <v-list-tile-action-text style="font-size:20px">{{item.purchasePrice}}</v-list-tile-action-text>
                    </v-list-tile-action>
                    </v-list-tile>
                    <v-divider v-if="index + 1 < purchases.length" :key="`divider-${index}`"></v-divider>
                </div>
                </v-list>
            </v-card>
            </v-flex>
        </v-layout>
        <v-card>
            <v-card-text style="position:fixed;bottom:32px;z-index:1;padding:0">
                <v-btn absolute dark fab top left color="green" style="left:43%" @click="$router.push('/purchases/release-purchase')">
                <v-icon>add</v-icon>
                </v-btn>
            </v-card-text>
        </v-card>
    </div>
</template>

<script>
export default {
    data(){
        return{
            purchases: [
                {purchaseId:1, attachmentUrl: '', purchaseName: '洗衣机',  purchaseDetail: "大家一起购买洗衣机" ,purchasePrice:'200元',people:2,communityName:'国际软件学院'},
                {purchaseId:2, attachmentUrl: '', purchaseName: '洗衣机',  purchaseDetail: "大家一起购买洗衣机" ,purchasePrice:'200元',people:2,communityName:'国际软件学院'},
                {purchaseId:3, attachmentUrl: '', purchaseName: '洗衣机',  purchaseDetail: "大家一起购买洗衣机" ,purchasePrice:'200元',people:2,communityName:'国际软件学院'},
                {purchaseId:4, attachmentUrl: '', purchaseName: '洗衣机',  purchaseDetail: "大家一起购买洗衣机" ,purchasePrice:'200元',people:2,communityName:'国际软件学院'},
                {purchaseId:5, attachmentUrl: '', purchaseName: '洗衣机',  purchaseDetail: "大家一起购买洗衣机" ,purchasePrice:'200元',people:2,communityName:'国际软件学院'},
                {purchaseId:6, attachmentUrl: '', purchaseName: '洗衣机',  purchaseDetail: "大家一起购买洗衣机" ,purchasePrice:'200元',people:2,communityName:'国际软件学院'},
                {purchaseId:7, attachmentUrl: '', purchaseName: '洗衣机',  purchaseDetail: "大家一起购买洗衣机" ,purchasePrice:'200元',people:2,communityName:'国际软件学院'},
                {purchaseId:8, attachmentUrl: '', purchaseName: '洗衣机',  purchaseDetail: "大家一起购买洗衣机" ,purchasePrice:'200元',people:2,communityName:'国际软件学院'},
            ],
            items:[],
            itemName:['purchaseId','attachmentUrl','purchaseName','purchaseDetail','purchasePrice','communityName'],//max people number
            filter:false,
            choices:[
                {title:'种类',content:['家常菜','烘焙','煲汤','饮品','小吃','其它']},
                {title:'口味',content:['酸','甜','苦','辣','咸','香']},
                {title:'适宜人群',content:['老人','小孩','孕妇','病人','男性','女性']},
            ],
            item:false,
            page:0,
        }
    },
    methods:{
        goDetail(id){
            this.$router.push('/purchases/'+id+'/purchase-detail')
        },
        addItem(){
            var scrollTop=document.documentElement.scrollTop || window.pageYOffset ||document.body.scrollTop
            // var purchases=this.getPurchases
            if(scrollTop+window.innerHeight>=document.body.offsetHeight){
                for(var dish in this.purchases){//delete this
                    this.items.push(this.purchases[dish])//delete this
                }
            }
        },
        getPurchases(){
            var purchases=[]
            this.$axios({
                method:'get',
                url:'/groupPurchase',
                params:{
                    pageNum:this.page,
                    pageSize:10,
                    name:this.name
                },
                headers:{
                    
                }
            }).then(
                function(response){
                    var res=response.parseJSON()
                    var rows=res['rows']
                    for(var i in rows){
                        var purchase=this.getPurchase(row[i])
                        purchases.push(purchases)
                    }
                }
            ).catch({
                function(response){
                    console.log(response)
                }
            })
            this.page++
            return purchases
        },
        getPurchase(row){
            var purchase={}
            for(var i in itemName){
                if(this.itemName[i]=='attachmentUrl'){
                    purchase[this.itemName[i]]=row[this.itemName[i]][0]
                }
                purchase[this.itemName[i]]=row[this.itemName[i]]
            }
            return purchase
        }
    },
    mounted(){
        this.addItem()
        window.addEventListener('scroll', this.addItem)
    },
    destroyed(){
        window.removeEventListener('scroll',this.addItem)
    }
}
</script>

<style scoped>
.flex.xs4{
    text-align: center
}

.search{
    height:50px;
    background:white;
    border-radius: 25px;
    margin:0 16px 16px 16px;
    padding: 0 10px 0 10px;
}

input:focus{
    outline: none
}
</style>
